import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Input,
    Space,
    Radio,
    Upload,
} from "antd";
import { Link, useHistory, useParams } from "react-router-dom";
import styles from "./index.module.scss";
import Channel from "@/components/Channel";
import { useEffect, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { message } from "antd";
import { useDispatch } from "react-redux";
import { addArticle, editArticle, getArticle } from "@/store/actions";
const Publish = () => {
    // 处理封面 单张 无 三张
    const [type, setType] = useState(1);
    // 上传图片列表
    const [fileList, setFileList] = useState([]);
    // 收集封面
    const onTypeChange = (e) => {
        setType(e.target.value);
        setFileList([]);
    };
    // 收集封面图片
    const onUploadChange = ({ fileList }) => {
        setFileList(fileList);
    };
    // 提交
    const history = useHistory();
    const dispatch = useDispatch();
    const onFinish = async (values, draft = false) => {
        if (type !== fileList.length) {
            return message.warning("请按照选择的封面类型上传图片");
        }
        const data = {
            ...values,
            cover: {
                type,
                images: fileList.map(
                    (item) => item.response.data.url || item.url
                ),
            },
        };
        if (params.id) {
            // 编辑
            data.id = params.id;
            await dispatch(editArticle(data, draft));
        } else {
            // 添加
            await dispatch(addArticle(data, draft));
        }
        message.success("保存成功");
        history.push("/article");
    };
    // 编辑文章处理
    const params = useParams();
    const [form] = Form.useForm();
    useEffect(() => {
        const setFormData = async () => {
            if (params.id) {
                const { title, cover, content, channel_id } = await dispatch(
                    getArticle()
                );
                form.setFieldsValue = { title, content, channel_id };
                setType(cover.type);
                setFileList(cover.images.map((item) => ({ url: item })));
            } else {
                setType(1);
                setFileList([]);
                form.resetFields();
            }
        };
        setFormData();
    }, [params, form, dispatch]);
    // 存入草稿
    const saveDarft = async () => {
        try {
            const values = await form.validateFields();
            onFinish(values, true);
        } catch (e) {}
    };
    return (
        <div className={styles.root}>
            <Card
                title={
                    // 面包屑
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <Link to="/article">内容管理</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            {params.id ? "修改文章" : "发布文章"}
                        </Breadcrumb.Item>
                    </Breadcrumb>
                }>
                <Form onFinish={onFinish} labelCol={{ span: 4 }}>
                    <Form.Item
                        label="文章标题："
                        rules={[{ required: true, message: "请输入文章标题" }]}
                        name="title">
                        <Input
                            placeholder="请输入文章标题"
                            style={{ width: 400 }}
                        />
                    </Form.Item>
                    <Form.Item
                        label="所属频道："
                        rules={[{ required: true, message: "请选择所属频道" }]}
                        name="channel_id">
                        <Channel width={400} />
                    </Form.Item>
                    <Form.Item label="文章封面：">
                        {/* 一个FormItem只能有一个元素 */}
                        <Form.Item style={{ marginBottom: 0 }}>
                            <Radio.Group value={type} onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {/* 这个位置放Upload组件 */}
                        {type > 0 ? (
                            <div style={{ marginTop: 16 }}>
                                <Upload
                                    name="image"
                                    listType="picture-card"
                                    action="http://geek.itheima.net/v1_0/upload"
                                    fileList={fileList}
                                    onPreview={() => {}}
                                    onChange={onUploadChange}>
                                    {fileList.length < type ? (
                                        <div>
                                            <PlusOutlined />
                                            <div style={{ marginTop: 8 }}>
                                                上传图片
                                            </div>
                                        </div>
                                    ) : null}
                                </Upload>
                            </div>
                        ) : null}
                    </Form.Item>
                    <Form.Item
                        label="文章内容："
                        name="content"
                        rules={[{ required: true, message: "请输入文章内容" }]}
                        wrapperCol={{ span: 16 }}
                        initialValue="">
                        <ReactQuill placeholder="请输入文章内容" />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                {params.id ? "修改文章" : "发布文章"}
                            </Button>
                            <Button onClick={saveDarft}>存入草稿</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
};

export default Publish;
